<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>03_background</title>
	<base target="blank">
	<style>
		#konwledege{
			position: fixed;
			right: 2%;
			top:2%;
			text-decoration:underline;
			color:inherit;
			outline: none;
			color: orange;
			font-size: 12px;
		}
		#toTop{
			position: fixed;
			right: 2%;
			bottom: 2%;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			border-radius: 100%;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 12px;
			text-align: center;
			color: red;
		}
		*{margin:0;padding: 0;}
		body{
			font-family: 'Microsoft yahei', Verdana, '仿宋',Arial, Helvetica, sans-serif;
			font-size: 18px;
			max-width: 1000px;
			margin: auto;
			position: relative;
		}
		a{text-decoration:none;color:inherit;outline: none;}
		img{border:none;vertical-align: middle;outline:none;}
		li{list-style:none;}		
	</style>
	<style class='home-work'>
		body,html{min-height: 2000px;max-width:100%;}
		section{
			width:100%;
			height: 100%;
			display: flex;
			flex-flow:row wrap;
			justify-content:space-around;
			align-content: space-around;
		}
		section > div{
			margin-top: 50px;
			width:500px;
			height: 300px;
			border:1px dashed blue;
		}
		.box1{
			/*background: -webkit-repeating-linear-gradient(0deg,red 10%,#fff 10%,red 30%);*/
			/*background: -webkit-linear-gradient(0deg,red 10%,green 10% ,transparent 10%) 0/1em 1em;*/
			background: -webkit-repeating-linear-gradient(315deg,#fff 0,#fff 10%,#13FF0A 0%, #13FF0A 20%);
		}
		.box2{
			background: -webkit-repeating-linear-gradient(75deg,#00f 0,#00f 10%,#0f0 0,#0f0 20%,#f00 0,#f00 30%);
		}
		.box3{
			background: 
			    -webkit-linear-gradient( 135deg, #0c908a 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px ), 
			    -webkit-linear-gradient( 225deg, #0c908a 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px )0 64px;
			-webkit-background-size: 64px 63px;
			background-size: 64px 63px;
			background-color: #0c908a;
		}
		.box4{
			background: 
				url('http://img2.3lian.com/img2007/13/41/20080409083252337.png')no-repeat 250px 110px/140px,
				url('http://img2.3lian.com/img2007/13/41/20080409083252158.png')no-repeat 50px 110px/150px,
				url('http://p3.so.qhimgs1.com/t0104034098444ad4d3.jpg') no-repeat center/contain;
		}
		.box5{
			border:3px solid #c0ebff;
			width: 393px;
		    height: 393px;
			background-image: 
			   -webkit-linear-gradient(180deg, #c0ebff 3px, transparent 3px) , 
			   -webkit-linear-gradient(90deg, #c0ebff 3px, transparent 3px);
			background-size: 1em 1em;
		}
		.box6{
			background-image: 
			    -webkit-linear-gradient(45deg, #555 25%, transparent 25%), 
			    -webkit-linear-gradient(-45deg,#555 25%,transparent 25%), 
			    -webkit-linear-gradient(45deg, transparent 75%, #555 75%), 
			    -webkit-linear-gradient(-45deg, transparent 75%, #555 75%);
			background-size: 1em 1em;
		}
		.box7{
			background-image: 
			    -webkit-linear-gradient(45deg, #555 25%, transparent 100%), 
			    -webkit-linear-gradient(-45deg,#555 25%,transparent 27%), 
			    -webkit-linear-gradient(45deg, transparent 75%, #555 75%), 
			    -webkit-linear-gradient(-45deg, transparent 75%, #555 75%);
			background-size: 1em 1em;
		}
		.box8{
			background-color: #c16;
		    background-image: 
		        -webkit-linear-gradient(
		        	-45deg, 
		        	rgba(255, 255, 255, .2) 25%, 
		        	transparent 25%, 
		        	transparent 50%, 
		        	rgba(255, 255, 255, .2) 50%, 
		        	rgba(255, 255, 255, .2) 75%, 
		        	transparent 75%, 
		        	transparent) ;
		    background-size: 50px 50px;
		}
		.box9{
			width: 400px;
			height: 400px;
			background: -webkit-repeating-radial-gradient(circle,white 0,white 12%,red 0,red 24%);
			border-radius: 100%;
		}
	</style>
</head>
<body>
	<div id="konwledege"><a href="baseKnowledege.html" target="_self">基本知识</a></div>
	<a href="#" id='toTop'>Top</a>
	<section>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
		<div class="box7"></div>
		<div class="box8"></div>
		<div class="box9"></div>
	</section>
	<script>
		
	</script>
</body>
</html>